@switch_width: 82px;
@switch_border_radius: 36px;
@switch_circle_color: #fff;
@switch_bg: #efefef;

.switch {
  display: inline-flex;
  vertical-align: top;
  &_input {
    height: 0;
    width: 0;
    visibility: hidden;
  }
  &_label {
    transition: all 0.2s;
    cursor: pointer;
    text-indent: -9999px;
    width: @switch_width;
    height: 50px;
    background: @switch_bg;
    display: block;
    border-radius: @switch_border_radius;
    position: relative;
    &:after {
      content: '';
      position: absolute;
      top: 0px;
      left: -1px;
      width: 45px;
      height: 45px;
      background: @switch_circle_color;
      border-radius: 50%;
      transition: 0.3s;
      box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.3),
        0px 10px 20px 0px rgba(0, 0, 0, 0.1);
      border: 1px solid #e5e5e5;
    }
  }
  &_input:checked + &_label {
    &:after {
      left: calc(100% + 1px);
      transform: translateX(-100%);
    }
  }
}
